<template>
  <div>
    <PageWrapper contentBackground contentClass="flex" dense contentFullHeight fixedHeight>
      <ImagePreview :imageList="imgList" />
      <BasicTable @register="registerTable">
        <template #chkresult="{ record, column }">
          <Tag v-if="1 == record[column.dataIndex]" color="green"> 通过 </Tag>
          <Tag v-else-if="0 == record[column.dataIndex]" color="red"> 不通过 </Tag>
          <Tag v-else>未核查</Tag>
        </template>

        <template #toolbar>
          <a-button type="primary" @click="handleReloadCurrent"> 刷新当前页 </a-button>
          <a-button type="primary" @click="handleReload"> 返回第一页 </a-button>
        </template>

        <template #action="{ record }">
          <TableAction :actions="getActs(record)" />
        </template>
      </BasicTable>
    </PageWrapper>
    <Drawer5 @register="register5">
      <template #drawContent> <DetailView :hid="houseId" :checkForms="houseInfoForm" /> </template>
    </Drawer5>
  </div>
</template>
<script lang="ts">
  import { defineComponent, defineAsyncComponent, toRefs, ref, computed } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getCityBasicColumns, searchByCityFormSchema } from './tableData';
  import { PageWrapper } from '/@/components/Page';
  import { createImgPreview, ImagePreview } from '/@/components/Preview/index';
  import { houseByCityCheckListApi, houseCityCheckApi } from '/@/api/demo/table';
  import { useModal } from '/@/components/Modal';
  import { useGlobSetting } from '/@/hooks/setting';
  import { Tag } from 'ant-design-vue';
  import { useDrawer } from '/@/components/Drawer';
  import Drawer5 from '/@/views/detail/Drawer5.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  const { info, success, warning, error } = createMessage;

  const DetailView = defineAsyncComponent(() => import('./detailCity.vue'));
  const globSetting = useGlobSetting();
  const imgList: string[] = [];
  export default defineComponent({
    name: 'HouseCheckInfo',
    components: {
      BasicTable,
      Drawer5,
      DetailView,
      PageWrapper,
      Tag,
      TableAction,
      ImagePreview,
    },
    props: {
      samplingId: {
        type: String,
        default: '',
      },
    },
    setup(props) {
      function houseCheckListWithIDApi(...arg: any) {
        const { samplingId } = toRefs(props);
        return houseByCityCheckListApi({ id: samplingId.value, ...arg[0] });
      }
      function getActs(record: Recordable) {
        const a = [
          {
            icon: 'clarity:tree-view-line',
            tooltip: '查看详情',
            onClick: handleViewDetails.bind(null, record),
          },
        ];

        return a;
      }

      const [registerTable, { reload }] = useTable({
        title: '房屋核查情况',
        api: houseCheckListWithIDApi,
        columns: getCityBasicColumns(),
        pagination: { pageSize: 10 },
        bordered: true,
        formConfig: {
          schemas: searchByCityFormSchema,
          autoSubmitOnEnter: true,
        },
        useSearchForm: true,
        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });

      function handleReloadCurrent() {
        reload();
      }

      const houseId = ref('');
      const houseInfoForm = ref({});
      const [register5, { openDrawer: openDrawer5, setDrawerProps }] = useDrawer();
      function handleViewDetails(record: Recordable) {
        houseId.value = record['id'];

        houseCityCheckApi({ id: houseId.value })
          .then((res) => {
            houseInfoForm.value = res;
            setDrawerProps({
              destroyOnClose: true,
              showDetailBack: false,
              afterVisibleChange: (visible: boolean) => {
                if (visible) {
                }
              },
            });
            openDrawer5(true);
          })
          .catch((err) => {
            error(err.message || '获取房屋信息失败');
          });
      }

      function handlePreview(record: Recordable) {
        const onImgLoad = ({ index, url, dom }) => {
          console.log(`第${index + 1}张图片已加载，URL为：${url}`, dom);
        };
        imgList.length = 0;
        if (record.phid) {
          let photos = record.phid.split(',');
          photos.forEach((ele) => {
            if (ele) imgList.push(`${globSetting.apiBaseUrl}/api/v1/images/${ele}`);
          });
        }
        // 可以使用createImgPreview返回的 PreviewActions 来控制预览逻辑，实现类似幻灯片、自动旋转之类的骚操作
        createImgPreview({ imageList: imgList, defaultWidth: 700, rememberState: true, onImgLoad });
      }

      function handleReload() {
        reload({
          page: 1,
        });
      }
      function handleSuccess() {
        reload();
      }
      return {
        imgList,
        registerTable,
        handleViewDetails,
        handlePreview,
        handleReloadCurrent,
        getActs,
        handleReload,
        handleSuccess,
        register5,
        houseId,
        houseInfoForm,
      };
    },
  });
</script>
